import React from 'react';
import { Row, Col, Divider, Image } from 'antd';
import { useEntryInfoById } from '@/hoc/useEntryInfoById';
import { getdownLoadUrl } from '@/services/file';

interface EntryInfoProps {
  id: string;
  filedata: any[];
}
const EntryInfo: React.FC<EntryInfoProps> = props => {
  const { id, filedata } = props;
  const info = useEntryInfoById(id);
  const { data } = info as any;
  return (
    <React.Fragment>
      <Row gutter={24}>
        <Col span={6} className="entry-info-item-left">
          词条释文:
        </Col>
        <Col span={18}>{data?.entryName ? data.entryName : ''}</Col>
      </Row>
      <Row gutter={24}>
        <Col span={6} className="entry-info-item-left">
          边款一:
        </Col>
        <Col span={18}>{data?.frameA ? data.frameA : ''}</Col>
      </Row>
      <Row gutter={24}>
        <Col span={6} className="entry-info-item-left">
          边款二:
        </Col>
        <Col span={18}>{data?.frameB ? data.frameB : ''}</Col>
      </Row>
      <Row gutter={24}>
        <Col span={6} className="entry-info-item-left">
          边款三:
        </Col>
        <Col span={18}>{data?.frameC ? data.frameC : ''}</Col>
      </Row>
      <Divider />
      <Row gutter={24}>
        <Col span={6} className="entry-info-item-left">
          供稿单位:
        </Col>
        <Col span={18}>{data?.company ? data.company : ''}</Col>
      </Row>
      <Row gutter={24}>
        <Col span={6} className="entry-info-item-left">
          作者:
        </Col>
        <Col span={18}>{data?.userName ? data.userName : ''}</Col>
      </Row>
      <Divider />
      <Row gutter={24}>
        <Col span={6} className="entry-info-item-left">
          附件:
        </Col>
        <Col span={18}>
          {filedata.map((item, idx) => {
            return (
              <div className="entry-info-item-pic" key={`entry-info-item-pic-${idx}`}>
                <Image src={getdownLoadUrl(item.pictureId)} />
              </div>
            );
          })}
          <div className="entry-info-item-pic-clear" />
        </Col>
      </Row>
    </React.Fragment>
  );
};

export default EntryInfo;
